<template>
  <el-dialog
    v-model="open" title="锁场" width="1000px" append-to-body :close-on-click-modal="false"
    @close="cancel"
  >
    <el-form ref="lockFieldRef" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="选择场地" prop="siteList">
        <div v-for="(s,i) in form.siteList" :key="i">
          <el-select v-model="s.siteIdArr" multiple>
            <el-option v-for="site in siteList" :key="site.id" :label="site.name" :value="site.id" />
          </el-select>
        </div>
      </el-form-item>
      <el-form-item label="时间段" prop="blockType">
        <div>
          <el-radio v-model="form.blockType" label="0">全天</el-radio>
          <el-radio v-model="form.blockType" label="1">固定时间段</el-radio>
          <el-radio v-model="form.blockType" label="2">日期时间</el-radio>
        </div>
      </el-form-item>

      <el-form-item v-if="form.blockType=='2'" label="开始日期" prop="orderDateStart">
        <el-date-picker
          v-model="form.orderDateStart" type="date" value-format="YYYY-MM-DD"
        />
        <el-time-select
          v-model="form.orderTimeStart"
          placeholder="00:00" format="HH:mm"
          start="00:00"
          end="23:30"
        />
      </el-form-item>
      <el-form-item v-if="form.blockType=='2'" label="结束日期" prop="orderDateEnd">
        <el-date-picker
          v-model="form.orderDateEnd" type="date" value-format="YYYY-MM-DD"
        />
        <el-time-select
          v-model="form.orderTimeEnd"
          placeholder="00:00" format="HH:mm"
          start="00:00"
          end="23:30"
        />
      </el-form-item>

      <el-form-item v-if="form.blockType!='2'" label="日期" prop="orderDateRange">
        <el-date-picker
          v-model="form.orderDateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item v-if="form.blockType=='1'">
        <div>
          <el-time-select
            v-model="form.orderTimeStart"
            :max-time="form.orderTimeEnd"
            class="mr-4"
            placeholder="00:00"
            :start="venStore.businessPeriod[0]"
            :end="venStore.businessPeriod[1]"
          />
          至
          <el-time-select
            v-model="form.orderTimeEnd"
            :min-time="form.orderTimeStart"
            class="mr-4"
            placeholder="00:00"
            :start="venStore.businessPeriod[0]"
            :end="venStore.businessPeriod[1]"
          />
        </div>
      </el-form-item>

      <el-form-item label="订单备注">
        <el-input v-model="form.remark" type="textarea" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">锁场</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { getCurrentInstance, reactive } from '@vue/runtime-core'
import { computed } from '@vue/reactivity'
import useVenStore from '@/store/modules/ven'
import { toRefs } from '@vueuse/shared'
import { getSiteList } from '@/api/ven'
import { saveBlockSite } from '@/api/ven/reserve'
import { watch } from 'vue'


const { proxy } = getCurrentInstance()
const emit = defineEmits(['update:modelValue', 'submitForm'])
const venStore = useVenStore()

// const projectList = computed(() => venStore.projectList)
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  projectId: {
    type: String,
    default: null
  }
})
const formBase = {
  blockType: '0', // 0 全天预约 1 时间段预约 2日期时间
  siteList: []
}
const data = reactive({
  form: {
    ...formBase
  },
  siteList: [],
  rules: {
    siteList: {
      validator: (rule, value, callback) => {
        if (value.length === 0 || _.some(value, (s) => {
          return !s.siteIdArr
        })) {
          callback('必填')
        } else {
          callback()
        }
      }, required: true },
    orderDateRange: { required: true, message: '必填', trigger: 'change' },
    orderDateStart: { required: true, message: '必填', trigger: 'change' },
    orderDateEnd: { required: true, message: '必填', trigger: 'change' },
    orderTimeStart: { required: true, message: '必填', trigger: 'change' },
    orderTimeEnd: { required: true, message: '必填', trigger: 'change' },
    blockType: {
      validator: (rule, value, callback) => {
        if (value === '1') {
          if (!form.value.orderTimeStart || !form.value.orderTimeEnd) {
            callback('必填')
            return
          }
        }
        callback()
      }, trigger: 'change' }
  }
})
const { form, rules, siteList } = toRefs(data)

const open = computed({
  get: () => props.modelValue,
  set: () => { }
})
watch(open, (val) => {
  if (val) {
    getSites()
    form.value = { ...formBase }
    form.value.siteList = [{}]
  } else {
    proxy.resetForm('lockFieldRef')
  }
})

function getSites() {
  // item.siteId = ''
  // {projectId: item.projectId}
  getSiteList().then(res => {
    siteList.value = res.rows
  })
}


function submitForm() {
  // console.log(form.value.orderDateRange)
  proxy.$refs['lockFieldRef'].validate((valid) => {
    if (valid) {
      form.value.siteIdStr = _.chain(form.value.siteList).map((s) => s.siteIdArr).uniq().join(',').value()
      if (form.value.blockType == '1') {
        form.value.orderTime = [form.value.orderTimeStart, form.value.orderTimeEnd].join(',')
        form.value.orderDate = form.value.orderDateRange.join(',')
      } else if (form.value.blockType == '0') {
        form.value.orderDate = form.value.orderDateRange.join(',')
      } else if (form.value.blockType == '2') {
        // form.value.orderTimeRange = form.value.orderDateRange.join(',')
        const arr = [form.value.orderDateStart + ' ' + form.value.orderTimeStart, form.value.orderDateEnd + ' ' + form.value.orderTimeEnd]
        form.value.orderTimeRange = arr.join(',')

      }
      console.log(form.value)
      saveBlockSite(form.value).then(() => {
        proxy.$modal.msgSuccess('锁场成功')
        emit('update:modelValue', false)
        emit('submitForm')
      })
    }
  })
}

function cancel() {
  emit('update:modelValue', false)
}

</script>

<style scoped>

</style>
